<template>
  <div class="appPage">
    <h3 class="tit">代理管理</h3>
    <div class="search">
      <div class="left">
        <div class="item">
          <span class="lab_tit">账号</span>
          <el-input
            v-model="username"
            placeholder="请输入账号"
            class="handle-input mr10" 
            v-on:keyup.enter="handleSearch"
          ></el-input>
          <span class="lab_tit">代理名称</span>
          <el-input
            v-model="realname"
            placeholder="请输入代理名称"
            class="handle-input mr10" 
            v-on:keyup.enter="handleSearch"
          ></el-input>
        </div>
      
        <el-button
          type="primary"
          icon="el-icon-search"
          @click="handleSearch"
          class="searchBtn"
          >查找</el-button
        >
      </div>

      <div class="right">
        <el-button
          class="reset"
          type="primary"
          icon="el-icon-refresh"
          @click="reset()"
          >重置</el-button
        >
        <el-button type="primary" class="add" @click="openAdd()">添加</el-button>
        <el-button type="primary" class="addW" @click="addWhite()">主叫加白</el-button>
        <el-button type="primary" 
        icon="el-icon-folder-opened" 
        @click="allWhite()" 
        class="allWhite">批量加白</el-button>
      </div>
    </div>
    <div class="container">
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="id"
          label="代理id"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="账号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="seatCount"
          label="坐席额度"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="realname"
          label="代理名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="money"
          label="余额"
          align="center"
        ></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
            <span v-if="scope.row.status == 2">冻结</span>
            <span v-if="scope.row.status == 1">正常</span>
        </template>

        </el-table-column>
        <el-table-column label="操作" width="500" align="center">
          <template #default="scope">
            <el-button type="primary" @click="recharge(scope)">充值</el-button>
            <el-button type="primary" @click="handleClick(scope)">编辑</el-button>
            <el-button type="primary" @click="enterprisesList(scope)">企业列表</el-button>
            <el-button type="primary" @click="lock(scope)" v-if="scope.row.status == '1'">锁定</el-button>
            <el-button type="danger" @click="lock(scope)" v-if="scope.row.status == '2'">解锁</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="pageIndex"
          :page-size="pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 添加弹出框 -->
    <el-dialog title="添加" v-model="addVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="账号">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="代理名称">
          <el-input v-model="form.realname"></el-input>
        </el-form-item>
        <el-form-item label="坐席额度">
          <el-input v-model="form.seatCount"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitAdd()" :disabled="rechargeBtn">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" v-model="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="用户账户">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item label="坐席额度">
          <el-input v-model="form.seatCount"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="form.realname"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveEdit">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 充值弹出框 -->
     <el-dialog title="充值" v-model="addMoney" width="30%">
      <el-form
        ref="dataAddForm"
        :rules="addMoneyRules"
        label-width="80px"
      >
      <el-form-item label="余额">
        <el-input-number
          v-model="formAdd"  
          :precision="2"
          :step="1.00"
          :max="99999">
        </el-input-number>
        </el-form-item>
        <!-- 备注 -->
        <el-form-item label="备注">
          <el-input v-model="remarks" type="textarea"></el-input>
        </el-form-item>  
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addMoney = false">取 消</el-button>
          <el-button type="primary" @click="rechargeSubmit" :disabled="rechargeBtn">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 主叫加白弹出框 -->
     <el-dialog title="主叫加白" v-model="addWhiteShow" width="30%">
          <span>请输入appid:</span>
          <el-input v-model="appid"></el-input>
          <span>请选择密钥:</span>
          <br>
          <el-select v-model="param_id">
            <el-option
              v-for="item in options2"
              :key="item.type"
              :label="item.appid"
              :value="item.id">
            </el-option>
          </el-select>  
        <el-form-item>
          <span>请输入加白号码:</span>
          <el-input v-model="phone"></el-input>
        </el-form-item>
        <el-form-item>
          <span>请输入名字</span>
          <el-input v-model="name"></el-input>
        </el-form-item>
        <el-form-item>
          <span>请输入身份证号</span>
          <el-input v-model="idCard"></el-input>
        </el-form-item>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addWhiteShow = false">取 消</el-button>
          <el-button type="primary" @click="addWhiteSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 批量加白弹出框 -->
    <el-dialog title="批量加白" v-model="allVisible" width="30%" custom-class="upload">

      <div class="content">
        <el-button type="success" 
        icon="el-icon-download" 
        @click="upload()" 
      >点击下载模板</el-button>

      <el-upload
        class="upload-demo"
        action=""
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :auto-upload="false"
        multiple
        :limit="1"
        :on-exceed="handleExceed"
        :file-list="fileList"
        :on-change="changeUpload"
        drag="true"
      >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <!-- <template #tip>
          <div class="el-upload__tip">只能上传 jpg/png 文件，且不超过 500kb</div>
        </template> -->
      </el-upload>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="allVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitUpload()" >确 定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "agent",
  data() {
    return {
      rechargeBtn:false,
      tableData: [],
      multipleSelection: [],
      delList: [],
      addVisible:false,//添加弹框是否显示
      editVisible: false,//编辑弹框是否显示
      addWhiteShow:false,//主叫加白弹框是否显示
      remarks:"",//充值时备注，只传不收
      pageTotal: 0,
      addMoney:false,
      allVisible:false,
      param_id:"",
      appid:"",
      phone:"",
      name:"",
      idCard:"",
      Options2:[],
      type:"1",//通道类型暂时固定为3（移动4通道）
      form: {
        id: "",
        username: "",
        password:"",
        money: "",
        realname: "",
        seatCount:"",
        status: "",
        oldMoney:null
      },
      pageIndex: 1,
      pageSize: 10,
      page:1,
      size:10,
      options: [
        {
          status: "1",
          label: "正常",
        },
        {
          status: "2",
          label: "禁止",
        },
      ],
      username:null,
      realname:null,
      formAdd:'',
    };
  },
  created() {
    this.getList()
  },
  //切换界面就执行方法
  activated(){
    this.getList()
  },
  watch:{
    username(){
      if(this.username == ""){
        this.username = null;
      }
    },
    realname(){
      if(this.realname == ""){
        this.realname == null;
      }
    },
    //  "type"(newValue, oldValue){
    //   console.log(newValue)
    //   this.options2 = []
    //   this.getData(newValue)
    // }
  },
  methods: {
    //批量加白
    allWhite(){
      this.allVisible = true
    },
    //点击下载
    upload(){
       window.open("http://118.190.2.70:9005/white.xls")
    },
    handleRemove(file, fileList) {
        console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${ file.name }？`);
    },
    changeUpload(file,fileList){
      this.file = file.raw
      console.log(file)
      console.log(fileList)
    },
    submitUpload(){
        let formDate = new FormData()
        formDate.append('file',this.file)
        axios
        .post("http://118.190.2.70:9999/vo/call/import-seat",formDate)
        .then((res) => {
            console.log(res.data.statusCode)
         if(res.data.statusCode == "00000"){
            this.$message.success(res.data.data)
            this.allVisible = false
            this.file = {}
            this.getList()
            } else {
            this.$message.error(res.data.data)
            this.allVisible = false
            this.file = {}
            this.getList()
        }
        })
        .catch((err) => {
          this.$message.error(err.data.message)
        });
    },

  // 分页导航
    handlePageChange(val) {
      this.page = val;
      this.getList();
    },
    //展示、搜索
    getList() {
      let params = {
        page: this.page,
        size: this.size,
        username: this.username,
        realname:this.realname
      };
      axios
        // .post("http://118.190.2.70:9999/vo/user/list", params)
        .post("http://118.190.2.70:9999/vo/user/list", params)
        .then((res) => {
          // console.log(res)
          this.tableData = res.data.data;
          this.pageTotal = res.data.total;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //刷新按钮
    reset(){
      this.username = null;
      this.realname = null;
      this.getList();
    },
    //搜索
    handleSearch() {
      this.getList();  
    },
    openAdd(){
      this.addVisible = true
      this.form.username = null;
      this.form.realname = null;
      this.form.seatCount = null;
      this.form.password = null;
      
    },
    
    //添加确定按钮
    submitAdd(){
      let params = {
        username:this.form.username,
        realname:this.form.realname,
        seatCount:this.form.seatCount,
        password:this.form.password,
        money:this.form.money,
        // status:this.form.status,
      }
      this.rechargeBtn = false
      axios
      .post("http://118.190.2.70:9999/vo/user/add",params)
      .then(res => {
        if(res.data.statusCode == "00000"){setTimeout(()=>{
            this.rechargeBtn = false
          },2000)
        this.addVisible = false;
        this.getList()
        this.$message.success(res.data.message)
        }else{
        this.$message.error(res.data.message)
        }
     
        })
         .catch(err => {
        console.log(err)
        this.rechargeBtn = false
        this.$message({
          message:res.data.message
      })
      })
    },
    //编辑回显
    handleClick(row){
      this.form.id = row.row.id
      this.editVisible = true;
      let params = {
        id:this.form.id,
      };
      axios
      //
      .post("http://118.190.2.70:9999/vo/user/findOne",params)
      .then(res => {
        console.log(res.data.data);
        this.form.username = res.data.data.username,
        this.form.realname = res.data.data.realname,
        this.form.seatCount = res.data.data.seatCount,
        this.form.status = res.data.data.status
      })
    },
    //编辑确定按钮
    saveEdit(){
      let params = {
        id:this.form.id,
        username:this.form.username,
        realname:this.form.realname,
        seatCount:this.form.seatCount,
        password:this.form.password,
        status:this.form.status,
      }
      axios
      .post("http://118.190.2.70:9999/vo/user/update",params)
      .then(res =>{
        console.log(res)
        this.editVisible = false;
        this.getList();
      })
    },

  //绑定
  lock(row){
      let status = ""
      if(row.row.status == 1){
        status = 2
      }else{
        status = 1
      }
      let params = {
        id: row.row.id,
        status:status
      };
       this.$confirm('请确定是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          
          axios
        .post("http://118.190.2.70:9999/vo/user/update", params)
          .then((res) => {
            console.log(res)
            if(res.data.statusCode == '00000'){
              this.$message.success(res.data.message)
              this.getList()
            }
          })
          .catch((err) => {
            console.log(err);
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      
    },
  
   //充值
    recharge(row){
      console.log(row)
      this.addMoney = true;
      this.id = row.row.id,
      this.formAdd = row.row.money
      this.money = row.row.money
      this.realname = row.row.realname
      this.remarks = null
    },
    //充值提交确定按钮
  rechargeSubmit(){
    let params = {
        id: this.id,
        username:this.username,
        money: this.formAdd,
        old_money:this.money,
        realname:this.realname,
        remarks:this.remarks,
      };
      this.rechargeBtn = true
      axios
        // .post("http://118.190.2.70:9999/vo/uuid/update", params)
        .post("http://118.190.2.70:9999/vo/user/update", params)
        .then((res) => {
            if (res.data.statusCode == "00000") {
              setTimeout(()=>{
            this.rechargeBtn = false
          },2000)
              this.$message({
                message: res.data.message,
                type: "success",
              });
              this.realname = null
              this.username = null
              this.getList();
            }else{
              this.$message.error(res.data.message)
            }
        })
        .catch((err) => {
          console.log(err);
        })
      .finally(() => {
        this.rechargeBtn = false
          this.addMoney = false
        })
    },

    //主叫加白
    addWhite(){
      this.addWhiteShow = true;
      this.appid = null;
      this.param_id = null;
      this.num = null;
      let params = {
        type:this.type,
      }
      // console.log(this.type)
      axios
        // .post("http://118.190.2.70:9999/vo/uuid/list", params)
        .post("http://118.190.2.70:9999/vo/uuid/findAllkey", params)
        .then((res) => {
          // console.log(res)
          this.options2 = res.data.data
          // this.$message.success(res.data.message)
        })
        .catch((err) => {
          console.log(err);
        });
    },

    //主叫加白提交按钮
  addWhiteSubmit(){
      let params = {
        appid:this.appid,
        param_id:this.param_id,
        phone:this.phone,
        name:this.name,
        idCard:this.idCard
      };
      axios
      // .post("http://118.190.2.70:9999/vo/uuid/update", params)
        .post("http://118.190.2.70:9999/vo/call/add-white-yd", params)
        .then((res) => {
          this.addWhiteShow = false
          if(res.data.statusCode == '00000'){
            this.$message.success(res.data.message)
           } else{
            this.$message.error(res.data.message)
           }
         
        })
        .catch((err) => {
          console.log(err);
        })
      .finally(() => {
          this.addMoney = false
        })
  },
  //点击企业列表按钮
  enterprisesList(row){
      // console.log(row.row.id)
      this.$router.push({
        path:'/enterprise',
        query: {
          userId:row.row.id
        }
      });
  }

}
}
</script>

<style scoped>
.content{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.content .upload-demo{
  margin-top: 50px;
  
}
.content /deep/ .el-upload--text{
    display: flex;
    justify-content: center;
    align-items: center;
}
.tit {
  font-weight: normal;
  font-size: 36px;
  color: #333333;
}
.search {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.left {
  display: flex;
  align-items: center;
}
.item{
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-left: 30px;
}
.lab_tit{
  margin:10px
}
.el-input{
  flex: 1;
  margin-left: 15px;
}
.el-select{
  flex: 1;
  margin-left: 15px;
}
.item:nth-child(1){
  margin-left: 0;
}
.searchBtn {
  margin-left: 15px;
}
.right {
  display: flex;
  justify-content: flex-end;
}
.reset {
  width: 90px;
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.add {
  margin-left: 15px;
}
.container {
  margin-top: 20px;
}
</style>
